<template>
	<view class="">
		<view class="timetable">
			<!-- header start -->
			<view class="header">
				<view class="header-item">
					<view class="">
						{{TodayMonth}}
					</view>
					<view class="">
						月
					</view>
				</view>
				<view class="header-item" v-for="(item,idx) in week" :key="idx"
					:class="[ConfirmToday(CurrentWeekDateList[idx]) ? 'active' : '']">
					<view class="">
						{{item}}
					</view>
					<view class="header-item-date" :class="[ConfirmToday(CurrentWeekDateList[idx])? 'active' : '']">
						{{CurrentWeekDateList[idx]}}
					</view>
				</view>
			</view>
			<!-- header end -->

			<!-- aside start -->
			<view class="aside">

				<!-- asideleft start -->
				<view class="aside-subTitle">
					<view class="aside-subTitle-knob" v-for="(sub,subidx) in courseKnob" :key="subidx">
						<text style="font-size: 10rpx;">{{sub}}</text>
					</view>
				</view>
				<!-- asideleft end -->

				<!-- asideright start -->
				<view class="aside-content">
					<view class="aside-content-course" v-for="(item,idx) in TimetablesData" :key="idx">
						<view class="course" v-for="(item1,idx1) in item" :key="idx1"
							:style="{height: (item1.length * 106) +'rpx',background: item1.backgroundColor != 'none' ? (ConfirmToday(CurrentWeekDateList[idx]) ? palette[0] : item1.backgroundColor) : 'none'}">
							<view class="name"
								v-if="item1.name!='null' && (item1.backgroundColor !== 'none') && item1.length">
								<text v-if="item1.name!='null'">{{item1.name}}</text><br />
								<text v-if="item1.teacher!='null'">{{item1.teacher}}</text>

							</view>
							<view class=""
								style="border-radius: 20rpx;background-color: #BFBFBF;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 20rpx;color: #fff;"
								v-if="item1.name=='null'">
								暂无课程
							</view>
						</view>
					</view>
				</view>
				<!-- asideright end -->

			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'xieTimetables',
		data() {
			return {
				TimetablesData: [], //课程表列表
				saveIndex: [] //保存第二次点击跳转事件
			}
		},
		props: {
			// 星期列表 不传默认为当前月份
			week: {
				type: Array,
				default () {
					return ['周一', '周二', '周三', '周四', '周五'];
				}
			},

			// 每天的上的节数
			courseKnob: {
				type: Array,
				default () {
					return ["8:25-9:05", "9:15-9:55", "10:10-10:50", "11:00-11:40", "14:40-15:20", "15:30-16:10"]
				}
			},
			// 调色板
			palette: {
				type: Array,
				default () {
					return ['#FD6565', '#389CFC'] //palette[0] 今天周几就是啥颜色  palette[1] 其余为啥颜色
				}
			},

			// 课表月份
			TodayMonth: {
				type: Number,
				default () {
					return (new Date().getMonth() + 1)
				}
			},

			// 课程表 默认二维数组
			Timetables: {
				type: Array,
				default: () => []
			},

			// 日期列表
			CurrentWeekDateList: {
				type: Array,
				default () {
					let now = new Date();
					let nowTime = now.getTime(); //当前距离1970毫秒数
					let day = now.getDay(); //当期是周几 // Sunday - Saturday : 0 - 6
					const oneDayTime = 24 * 60 * 60 * 1000; //一天的毫秒数
					let MondayTime = nowTime - (day - 1) * oneDayTime; //周一的日期
					let myDate = new Date(MondayTime)
					myDate.setDate(myDate.getDate()); //设置日期
					let dateArray = [];
					for (var i = 0; i < 7; i++) {
						let month = myDate.getMonth() + 1; //月份
						let date = myDate.getDate(); //日期
						month < 10 ? (month = "0" + month) : month;
						date < 10 ? (date = "0" + date) : date;
						let dateTemp = month + "/" + date;
						dateArray.push(dateTemp);
						myDate.setDate(myDate.getDate() + 1);
					}
					// 返回所有的日期列表dateArray
					return dateArray;
				}
			}
		},
		watch: {
			Timetables: {
				handler(val) {
					this.TimetablesData1()
				},
				immediate: true,
				deep: true
			},
		},
		methods: {
			/**
			 * @description 判断是否为今天
			 * @param {Object} tod 日期 eg:'08/01'
			 */
			ConfirmToday(tod) {
				let data1 = new Date();
				let month = (data1.getMonth() + 1) < 10 ? '0' + (data1.getMonth() + 1) : data1.getMonth() + 1;
				let date = data1.getDate() < 10 ? '0' + data1.getDate() : data1.getDate();
				let TodayDate = month + '/' + date;
				if (TodayDate == tod) {
					return true;
				} else {
					return false;
				}
			},
			/**
			 * @description  处理课程信息
			 */
			TimetablesData1() {
				// 给等于今天的列设置颜色
				const getBackgroundColor = (index) => {
					return this.palette[1]
				}
				// 合并一个数据
				const listMerge = [];
				this.Timetables.forEach((list, i) => {
					if (!listMerge[i]) {
						listMerge[i] = []
					}
					list.forEach((item, index) => {
						// 每一项的第一个至今return;
						if (!index) {
							return listMerge[i].push({
								name: item.split(",")[0],
								teacher: item.split(",")[1],
								length: 1,
								backgroundColor: item == '' ? 'none' : getBackgroundColor(i),
							})
						}
						// 判断item是否与上一个name相同 并且不为空进入
						if (item === listMerge[i][index - 1].name && item) {
							const sameIndex = listMerge[i][index - 1].sameIndex //判断上一个是否相同
							if (sameIndex || sameIndex === 0) {
								listMerge[i][sameIndex].length++ //上一项相同的值长度加一
								if (item.split(",")[0] == null && item.split(",")[1] == null) {
									return listMerge[i].push({
										name: item.split(",")[0],
										teacher: item.split(",")[1],
										length: 0,
										sameIndex: sameIndex
									}) //继续保存上一个值	
								}

							}
							listMerge[i][index - 1].length++ //索引lenght加1
							return listMerge[i].push({
								name: item.split(",")[0],
								teacher: item.split(",")[1],
								length: 0,
								sameIndex: index - 1
							})
						} else {
							return listMerge[i].push({
								name: item.split(",")[0],
								teacher: item.split(",")[1],
								length: 1,
								backgroundColor: item === '' ? 'none' : getBackgroundColor(i),
							})
						}
					})
				})
				// this.$nextTick(() => {
				this.TimetablesData = listMerge;
				// })
			}
		},

	}
</script>
<style lang="scss" scoped>
	.timetable {
		background-color: #fff;
		width: 760rpx;
		// margin: 0 auto;
		margin-top: 20rpx;
	}

	.header {

		// padding-left: 88rpx;
		height: 74rpx;
		display: flex;
		align-items: center;
		background: #F5F7FA;
		background-color: #fff;
		border-bottom: 1px solid #EEEEEE;
	}

	.header-item {
		// flex: 1;
		width: 120rpx;
		margin: 5px;
		margin-left: 0px;
		margin-right: 0px;
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 500;
		text-align: center;

	}

	.header-item-date {
		font-size: 20rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
	}

	.aside {

		width: 720rpx;
		display: flex;

		.aside-content {
			width: calc(720rpx - 90rpx);
			display: flex;

			.course {
				position: relative;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				width: 120rpx;
				height: 180rpx !important;

				box-sizing: border-box;
				border-bottom: 1rpx solid #EEEEEE;
				border-radius: 20rpx;
				margin: 5px;
				margin-left: 0px;

				.name {
					padding: 15rpx;
					padding-top: 40rpx;
					text-align: center;
					color: #fff;
					font-size: 18rpx;
					font-weight: 500;
				}

			}
		}

		.aside-subTitle {
			width: 90rpx;

			.aside-subTitle-knob {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90rpx;
				height: 180rpx;
				margin: 5px;

				border-bottom: 1px solid #EEEEEE;
			}
		}
	}

	// .active {
	// 	color: blue;
	// }
</style>
